<template>
	<view class="content">
		<view class="recharge-content">
			<view class="recharge-card">
				<image :src="eImg" mode="widthFix" lazy-load></image>
				<text>{{i18n.recharge}}{{title_en}}{{i18n.address}}</text>
			</view>
			<view class="recharge-address">
				<text>{{address}}</text>
				<view class="copy" hover-class="active" @tap.stop="copy">
					{{i18n.copy_address}}
				</view>
			</view>
		</view>
		<view class="recharge-content">
			<view class="items">
				<view class="title">
					{{i18n.rechareTips}}
				</view>
				<view class="item-list">
					<text>1. {{i18n.rechareTips01}}</text>
					<text>2. {{i18n.rechareTips02}}。</text>	
					<text>3. {{i18n.rechareTips03}}</text>
				</view>
			</view>
		</view>
		<load v-if="showLoad"></load>
	</view>
</template>

<script>
	import Load from '../../components/common/load.vue';
	import {fetch, _updataTabBar, showToast, pageto, forceUpdate} from '@/common/js/util.js'
	import {mapGetters} from 'vuex' 
	export default {
		components:{
			Load
		},
		computed:  {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getLang'
			])
		},
		onShow(){
			uni.setNavigationBarTitle({
				title:this.getLang==1?'充值':'Recharge'
			})
		},
		data() {
			return {
				showLoad:false,
				title_en:'',
				tokenId:'',
				address:'',
				eImg:''
			};
		},
		onLoad(e){
			this.tokenId = JSON.parse(e.item).id;
			this.title_en = JSON.parse(e.item).title_en;
			if(!JSON.parse(e.item).address){
				this.getAddress();
			}else{
				this.address = JSON.parse(e.item).address;
				this.eImg = this.getRequestUrl+'/static/zhifu_img/'+this.address+'.png'
			}
		},
		methods:{
			copy(){
				uni.setClipboardData({
					data: this.address,
					success: function () {
						uni.showToast({
							title:'复制成功'
						})
					}
				});
			},
			getAddress(){
				let _url = this.getRequestUrl+'/api/wallet/create_address';
				let data = {
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token,
					token_id:this.tokenId
				}
				let result = fetch(_url, data, "POST");
				this.showLoad = true;
				result.then(res=>{
					// console.log(res);
					this.showLoad = false;
					if(res.data.code){
						// this.coinslist = res.data.data
						this.address = res.data.data.address;
						this.eImg = this.getRequestUrl+'/static/zhifu_img/'+res.data.data.address+'.png'
					}
				}).catch(err=>{
					this.showLoad = false;
					console.log(err)
				})
			}
		}
	}
</script>
<style>
	page{
		background-color: #eff3f7;
	}
</style>
<style lang="scss">
	.content{
		padding:0 30upx;
		.recharge-content{
			background-color: #FFFFFF;
			margin-top: 30upx;
			border-radius:20upx;
			.items{
				padding: 40upx 36upx 94upx;
				.title{
					font-size:24upx;
					font-weight: bold;
					color: #212121;
					margin-bottom: 28upx;
				}
				.item-list{
					text{
						display: block;
						font-size:20upx;
						color: #5A5A5A;
						margin-bottom: 30upx;
						line-height: 34upx;
					}
				}
			}
			.recharge-card{
				margin: 0 24upx;
				text-align: center;
				border-bottom: 1px dashed #cacaca;
				image{
					margin-top: 45upx;
					width: 220upx !important;
					height: 220upx !important;
					flex-shrink: 0;
					border:20upx solid #FFFFFF;
				}
				text{
					display: block;
					font-size:24upx;
					margin: 29upx 0 62upx;
				}
			}
			.recharge-address{
				padding-top: 70upx;
				padding-bottom: 48upx;
				text{
					background-color: #eff3f7;
					border-radius:10upx;
					padding:20upx;
					display: block;
					width: 80%;
					margin:0 auto;
					white-space:normal; 
					word-break:break-all;
					overflow:hidden;
				}
				.copy{
					width: 314upx;
					height: 80upx;
					line-height: 80upx;
					text-align: center;
					border-radius:40upx;
					background:#26375b;
					color: #fff;
					font-size: 26upx;
					margin: 48upx auto 0;
					&.active{
						transform: scale(.9);
						opacity: .9;
					}
				}
			}
		}
		
	}
</style>
